Reactda Resurslarni Mustahkam Yuklash: Hooklar yordamida Xatolik Chegaralarini (Error Boundaries) O'zlashtirish

Zamonaviy veb-ilovalarda resurslarni asinxron yuklash odatiy holdir. API'dan ma'lumotlarni olish, rasmlarni yuklash yoki modullarni import qilish bo'ladimi, resurslarni yuklash paytida yuzaga kelishi mumkin bo'lgan xatolarni boshqarish silliq foydalanuvchi tajribasi uchun juda muhimdir. React Xatolik Chegaralari (Error Boundaries) o'zlarining quyi komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlab olish, ularni qayd etish va butun ilovani ishdan chiqarish o'rniga zaxira foydalanuvchi interfeysini (UI) ko'rsatish mexanizmini taqdim etadi. Ushbu maqolada resurslarni yuklash xatolarini boshqarish uchun React Hooklari bilan birgalikda Xatolik Chegaralaridan qanday samarali foydalanish mumkinligi ko'rib chiqiladi.

Xatolik Chegaralarini (Error Boundaries) Tushunish

React 16 dan oldin, komponent renderi paytida qayta ishlanmagan JavaScript xatoliklari Reactning ichki holatini buzib, keyingi renderlarda tushunarsiz xatolarga olib kelardi. Xatolik Chegaralari o'zlarining quyi komponentlarida yuzaga keladigan xatolar uchun umumiy tutuvchi bloklar vazifasini bajarish orqali bu muammoni hal qiladi. Ular quyidagi hayotiy sikl metodlaridan birini yoki ikkalasini ham amalga oshiradigan React komponentlaridir:

• static getDerivedStateFromError(error): Bu statik metod quyi komponentda xatolik yuzaga kelganidan so'ng chaqiriladi. U xatolikni argument sifatida qabul qiladi va komponent holatini yangilash uchun qiymat qaytaradi.
• componentDidCatch(error, info): Bu hayotiy sikl metodi quyi komponentda xatolik yuzaga kelganidan so'ng chaqiriladi. U xatolikni argument sifatida, shuningdek, qaysi komponent xatolikni yuzaga keltirgani haqida ma'lumotga ega obyektni qabul qiladi. Siz undan xatolik ma'lumotlarini qayd etish uchun foydalanishingiz mumkin.

Muhimi, Xatolik Chegaralari faqatgina ularning quyi daraxtidagi komponentlarning render bosqichida, hayotiy sikl metodlarida va konstruktorlarida yuzaga kelgan xatolarni ushlaydi. Ular quyidagi holatlar uchun xatolarni ushlamaydi:

• Hodisalarni qayta ishlovchilar (event handlers) (quyidagi bo'limda ko'proq ma'lumot oling)
• Asinxron kod (masalan, setTimeout yoki requestAnimationFrame qayta chaqiruvlari)
• Server tomonidagi renderlash (server-side rendering)
• Xatolik Chegarasining o'zida yuzaga kelgan xatolar (uning quyi komponentlarida emas)

Xatolik Chegaralari va React Hooklari: Kuchli Kombinatsiya

Xatolik Chegaralarini amalga oshirish uchun an'anaviy ravishda sinf komponentlari ishlatilgan bo'lsa-da, React Hooklari yanada ixcham va funksional yondashuvni taklif qiladi. Biz xatolarni boshqarish mantig'ini o'z ichiga olgan va resurslarni yuklash paytida xatolik yuzaga keltirishi mumkin bo'lgan komponentlarni o'rash uchun qulay usulni ta'minlaydigan qayta ishlatiladigan useErrorBoundary hookini yaratishimiz mumkin.

Maxsus useErrorBoundary Hookini Yaratish

Bu yerda useErrorBoundary hookining namunasi keltirilgan:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Tushuntirish:

• useState: Biz xatolik holatini boshqarish uchun useStatedan foydalanamiz. U dastlab xatolikni null ga o'rnatadi.
• useCallback: Biz resetError va captureError funksiyalarini memoizatsiya qilish uchun useCallbackdan foydalanamiz. Agar bu funksiyalar prop sifatida uzatilsa, keraksiz qayta renderlarning oldini olish uchun bu yaxshi amaliyotdir.
• ErrorBoundary Komponenti: Bu useCallback bilan yaratilgan funksional komponent bo'lib, children va ixtiyoriy fallback propini qabul qiladi. Agar holatda xatolik mavjud bo'lsa, u taqdim etilgan fallback komponentini yoki standart xato xabarini render qiladi. Aks holda, u quyi komponentlarni render qiladi. Bu bizning Xatolik Chegaramiz vazifasini bajaradi. `[error]` bog'liqliklar massivi `error` holati o'zgarganda qayta render qilinishini ta'minlaydi.
• captureError Funksiyasi: Bu funksiya xatolik holatini o'rnatish uchun ishlatiladi. Siz uni resurslarni yuklashda try...catch bloki ichida chaqirasiz.
• resetError Funksiyasi: Bu funksiya xatolik holatini tozalaydi, bu esa komponentga o'zining quyi komponentlarini qayta render qilish (ehtimol, resursni yuklashga qayta urinish) imkonini beradi.

Xatolarni Boshqarish bilan Resurslarni Yuklashni Amalga Oshirish

Endi, bu hookdan resurslarni yuklash xatolarini boshqarish uchun qanday foydalanishni ko'rib chiqamiz. Foydalanuvchi ma'lumotlarini API'dan oladigan komponentni ko'rib chiqing:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Foydalanuvchi ma'lumotlarini yuklab bo'lmadi. Qayta urinish